<template>
  <div>
    <!-- 一条文章单元格 -->
    <van-cell v-for="item in dataList" :key="item.art_id" @click="clickFn(item.art_id)">
      <!-- 标题区域的插槽 -->
      <template v-slot:title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{  item.title  }}</span>
          <!-- 单图,根据type值判断是否显示 -->
          <img :src="item.cover.imgUrl" alt="" class="thumb" v-if="item.cover.type === 1">
        </div>
        <div class="thumb-box" v-if="item.cover.type > 1">
          <!-- 三图 ，根据type值判断是否显示-->
          <img :src="imgUrl" alt="" class="thumb" v-for="(imgUrl, index) in item.cover.images" :key="index">

        </div>

      </template>
      <!-- 标签区域的插槽 -->
      <template v-slot:label>
        <div class="label-box">
          <div>
            <span>作者 {{  item.aut_name  }}</span>
            <span>评论 {{  item.comm_count  }}</span>
            <span>{{  formatTime(item.pubdate)  }}</span>
            <!-- 反馈按钮 -->
            <!-- .stop阻止事件冒泡 -->
            <van-icon name="cross" class="icon" @click.stop="show = true" v-if="isShow"></van-icon>
          </div>
        </div>
      </template>
    </van-cell>
    <!-- 反馈面板 -->
    <!-- 注意，这里如果不更改挂载点，会无法显示 -->
    <!-- 因为父级元素有ovreflow：hidden，子元素超出父元素，所以隐藏了，所以要更改挂载元素 get-container="body"-->
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" @close="closeFn" />
  </div>

</template>

<script>
import { timeAgo } from '@/utils/day.js'
import { firstActions, secondActions } from '@/api/report'
export default {
  data() {
    return {
      show: false,
      actions: firstActions // 反馈面板选项数组

    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    dataList: Array,
    // 文章信息对象
    artObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  // 子向父传值
  emits: ['dislike', 'report'],
  methods: {
    formatTime: timeAgo,
    // 反馈事件
    onSelect(action, item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // this.show = false
      if (action.name === '反馈垃圾内容') {
        this.actions = secondActions
      } else if (action.name === '取消') {
        this.show = false
      } else if (action.name === '返回') {
        this.show = true
        this.actions = firstActions
      } else if (action.name === '不感兴趣') {
        // 在父组件中执行
        this.$emit('dislike', this.artObj.art_id)
      } else if (this.actions === secondActions) {
        this.$emit('report', this.artObj.art_id, action.value)
      }
    },
    // 关闭面板触发事件
    closeFn() {
      this.actions = firstActions
    },
    // 点击跳转至文章详情页
    clickFn(id) {
      this.$router.push(`/article?aid=${id}`)
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  // 主轴上的子元素排列方式：平分剩余空间
  justify-content: space-between;
  // 侧轴上的子元素排列方式：从上到下
  align-items: flex-start;
}

/* label标签样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;

  &:first-child {
    margin-left: 0;
  }

}

/* 图片的样式 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  /* 保存原有尺寸比例，但部分内容可能被剪切 */
  object-fit: cover;
}

/* 三图 */
.thumb-box {
  display: flex;
  /* 主轴上的子元素排列方式：先两边贴边，再平分剩余空间 */
  justify-content: space-between;
}
</style>
